<template>
  <el-popover v-if="row[rowKey]" trigger="hover" placement="right" @show="handelShow">
        <div>点击图片预览大图</div>
        <p v-for="(image, key) in imageList" style="display:inline-block;width:400px;padding: 0;margin: 0;">
          <i>{{image.text}}</i><br/>
          <!-- <img :src="image.path" lazy style='max-height:280px;max-width:96%;'> -->
            <el-image
            style="max-height:280px;max-width:96%;"
            :src="image.path"
            fit="contain"
            :preview-src-list="previewImageList">
            </el-image>
        </p>
        <div slot="reference" class="name-wrapper">
          <el-tag size="medium"><i class='el-icon-picture-outline'></i></el-tag>
        </div>
      </el-popover>
</template>
<script type="text/javascript">
  define(['vue'],function(vue){
    //注意下面不能使用label
    return vue.component('tip-preview-image',{
      props:{
        row:{required:true},
        rowKey:{required:false,default:function(){
          return 'imageSrc';
        }},
      },
      template:template,
      data : function() {
        return {
          dialogFormVisible:true,
          form:{},
          imageList:[],
          previewImageList:[],
        };
      },
      methods:{
        handelShow:function(){
          this.imageList = this.row[this.rowKey] || [];
          this.imageList.forEach((item)=>{
            this.previewImageList.push(item.path);
          });
        },
      },
      mounted:function() {

      },
    });
  });
</script>
<style>
</style>